<template>
  <view class="order">
    <view class="header-box">
      <view class="header">
        <button
          :class="type===0?'header-btn-c':''"
          @tap="handleChangeType(0)"
        >预订单</button>
        <button
          :class="type===1?'header-btn-c':''"
          @tap="handleChangeType(1)"
        >到店券</button>
      </view>

      <tab :tab="tab" @tabChange="handleTabChange" :tabIndex="tabIndex"></tab>
    </view>
    <view style="height: 252rpx;"></view>
    <mescroll-uni
      :fixed="false"
      :up="upOption"
      :down="downOption"
      @down="downRefresh"
      @up="upRefresh"
      @init="mescrollInit"
    >
      <view v-if="type===0">
        <item
          v-for="(item,index) in dataList"
          :key="index"
          :item="item"
          @change="itemChange"
        ></item>
      </view>
      <view v-if="type===1">
        <yditem
          v-for="(item,index) in dataList"
          :key="index"
          :item="item"
          @change="itemChange"
        ></yditem>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { getGoods, getYdGoods } from './api'
import CONSTS from '@/src/consts';
import yditem from '@/src/pages/components/yd-item'
import item from '@/src/pages/components/order-item'
import tab from '@/src/pages/components/tab'
import MescrollUni from 'mescroll-uni'
export default {
  data () {
    return {
      type: 1,//预定单0 到店卷1
      basic: CONSTS.BASE_URL + 'basic',
      mescroll: null, // mescroll实例对象，不需要定义pageNo, pageSize
      downOption: {
        auto: false,
      },
      upOption: {
        auto: true,
        page: {
          num: 0,
          size: 20 // 每页数据的数量,默认10
        }
      },
      tabIndex: 0,
      allStata: [],
      stata1: [],
      stata2: [],
      stata3: [],
      dataList: [

      ],

      tab: [],

      typeTab: [

        [
          { tit: '全部' },
          { tit: '待确认' },
          { tit: '待使用' },
          { tit: '已完成' }
        ], [
          { tit: '全部' },
          { tit: '待使用' },
          { tit: '已核销' }
        ]
      ],
      shopInfo: {},
    }
  },
  components: {
    item,
    tab,
    yditem,
    MescrollUni
  },
  onShow () {
    this.tab = this.typeTab[this.type]
    const _self = this
    uni.getStorage({
      key: 'shopInfo',
      success: function (res) {
        _self.shopInfo = res.data
      }
    });
    // this.loadData()
  },
  onLoad () {
    console.log(this.$dayjs().format())
  },
  watch: {
    tabIndex: {
      handler (val) {
        this.upRefresh()
        // this.loadData()
        // switch (val) {
        //   case 0:
        //     console.log(val)
        //     this.dataList = this.allStata
        //     break;
        //   case 1:
        //     this.dataList = this.stata1
        //     break;
        //   case 2:
        //     this.dataList = this.stata2
        //     break;
        //   case 3:
        //     this.dataList = this.stata3
        //     break;
        // }

      }
    }
  },
  methods: {
    lalal (e) { },
    handleChangeType (idx) {
      this.type = idx;
      this.tab = this.typeTab[idx]
      this.tabIndex = 0
      this.upRefresh()
    },
    itemChange () {
      this.mescroll.resetUpScroll()
    },
    mescrollInit (mescroll) {
      this.mescroll = mescroll;
    },
    downRefresh () {
      this.mescroll.resetUpScroll()
    },
    upRefresh () {
      this.loadData()
    },
    handleTabChange (idx) {
      this.tabIndex = idx
    },
    handleClassify (res) {
      this.stata1 = []
      this.stata2 = []
      this.stata3 = []
      for (const item of res) {
        if (item.state === 1 || item.state === 4 || item.usageState === '1') {
          this.stata1.push(item)
        } else if (item.state === 2 || item.usageState === '2' || item.usageState === '3') {
          this.stata2.push(item)
        } else if (item.state === 5) {
          this.stata3.push(item)
        }
      }
    },
    async loadData () {
      const params = {
        page: this.mescroll.num,
        size: this.mescroll.size,
        // shelfState: this.tabIndex
		state:this.mescroll.state
      }
	  console.log(params)
      const keyState = this.type === 0 ? 'state' : 'usageState'
      params[keyState] = this.tabIndex
      try {
        let api = this.type === 0 ? getGoods : getYdGoods
        const { data } = await api(params)
        const items = data.datas || []
        this.mescroll.endSuccess(items.length, data.hasNext)
        this.dataList = data.datas
		console.log(data)
        // this.handleClassify(this.dataList)
      } catch (err) {
        if (err.code !== 200) {
          this.mescroll.endErr()
          return this.$utils.common.toast.fail(err.data.message);
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.header-box {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 1000;
}
.mescroll-uni-warp {
  height: 80vh;
}
.news {
  width: 44rpx;
  position: absolute;
  right: 30rpx;
  // right: 30rpx;
}

.order {
  height: 100vh;
  background-color: #f1f1f1;
  .header {
    position: relative;
    padding: 0 30rpx;
    padding-top: 80rpx;
    padding-bottom: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    // height: 120rpx;
    background: #0de0d5;
    button {
      width: 152rpx;
      height: 60rpx;
      border: 1rpx solid rgba(255, 255, 255, 1);
      opacity: 1;
      border-radius: 10rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 1);
      opacity: 1;
    }
    &-btn-c {
      color: rgba(13, 224, 213, 1) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
    button:nth-child(1) {
      margin-right: 20rpx;
    }
  }
}
</style>

